<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<body>
		<canvas id="zhushen" width="500px" height="500px" style="border: 10px solid #ff0000; background-color: #000000;"></canvas>
	</body>
</html>
<script>
	//定义画布的特性
	var zhushen=document.getElementById("zhushen").getContext("2d");
	//声明一个数组
	var img = [];
	//为数组赋值
	img[0] = new Image();
	img[0].src="zhushen/002-1.png";
	img[1]=new Image();
	img[1].src="zhushen/002-2.png";
	img[2]=new Image();
	img[2].src="zhushen/002-3.png";
	img[3]=new Image();
	img[3].src="zhushen/002-4.png";
	img[4]=new Image();
	img[4].src="zhushen/002-5.png";
	img[5]=new Image();
	img[5].src="zhushen/002-6.png";
	img[6]=new Image();
	img[6].src="zhushen/002-7.png";
	img[7]=new Image();
	img[7].src="zhushen/002-8.png";
	img[8]=new Image();
	img[8].src="zhushen/002-9.png";
	img[9]=new Image();
	img[9].src="zhushen/002-10.png";
	
	//打开页面执行一个函数
	window.onload=function(){
		//快速执行的函数
		setInterval((function(){
			//声明一个变量
    		var i = 0;
    		//直接返回一个函数
    		return function () {
    			//清除画布
    			zhushen.clearRect(0,0,350,350);
    			//播放图片
    			zhushen.drawImage(img[i],10,10);
  				i++;
  				if(i >= 10) i = 0;
			}
		})(),100);
	}
</script>